<script setup>
import { Toast } from "vant";
import { reactive, onMounted, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { useUpdateNotifyStatus } from "@/hooks/notify-hook"

const app = getCurrentInstance().appContext.app;
const store = useStore();
const notify = store.state.notify;
const D = reactive({
  route: useRoute(),
});

let notifys = reactive({});

if (D.route.query.type === "new_friend") {
  notifys = notify.notifyMessage;
} else {
  notifys = notify.groupNotifyMessage; 
}

app.$bus.on("setNotifys", (data) => {
  if (D.route.query.type === "new_friend") {
    notifys.data = data.friend.list;
    notifys.type = data.friend.type;
  } else {
    notifys.data = data.group.list; 
    notifys.type = data.group.type;
  }
});

const agree = async (item,type) => {
    await useUpdateNotifyStatus(item,type);
}

</script>

<template> 
  <div class="notify">
    <van-cell>
      <template #title>
        <span class="custom-title" v-if="D.route.query.type === 'new_friend'"
          >好友通知</span
        >
        <span class="custom-title" v-if="D.route.query.type === 'group_notify'"
          >群通知</span
        >
      </template>
    </van-cell>
    <van-cell
      v-for="item in notifys.data"
      :title="item.from_name"
      size="large"
      :label="
        D.route.query.type === 'new_friend'
          ? '来源：QQ号搜索'
          : '来源：群号搜索'
      "
    >
      <template #icon>
        <van-image width="60" height="60" fit="cover" :src="item.from_avatar" />
      </template>
      <template #right-icon>
        <van-button type="default" @click="agree(item,notifys.type )">同意</van-button>
      </template>
    </van-cell>
    <van-empty v-if="JSON.stringify(notifys) === '{}' || notifys.data?.length <= 0" description="没有新通知" />
  </div>
</template>

<style lang="scss" scoped></style>
